body {
  margin: 0;
  font-kerning: normal; 
}

.topnav {
  margin-top: 10px;
  height: 100px;
  /* width: 798px; */
  display: flex;
   position: absolute;
  top: 0px;
  left: 0px;
}
/* .topnav {max-width:100vw;} */
.topnav {width:100vw;}

/* ////////////////////////////////////////////////////////////////////////// */
.topnav a:nth-child(1) {
  background-image: url(../img/aarde_75_75_blur.png);
  /* opacity: 0.7; */
}

/* .topnav a:nth-child(2) {
  background-image: url(../img/aarde_75_75_magenta_blur.png);
 
} */

.topnav a:nth-child(2) {
  background-image: url(../img/lichtobject_75_75.png);
  /* opacity: 0.7; */
}

.topnav a:nth-child(3) {
  background-image: url(../img/lichtobject2_75_75_blur_dark.png);
  /* opacity: 0.7; */
}
.topnav a:nth-child(4) {
  background-image: url(../img/lichtobject3_75_75_dark.png);
  /* opacity: 0.7; */
}
.topnav a:nth-child(5) {
  background-image: url(../img/lichtobject5_75_75_dark.png);
  /* opacity: 0.7; */
}
.topnav a:nth-child(6) {
  /* background-image: url(../img/lichtobject7_75_75_dark.png); */
  background-image: url(../img/lichtobject7_75_75_dark_opacity_0_8.png);
  /* opacity: 0.7; */
}
.topnav a:nth-child(7) {
  /* background-image: url(../img/lichtobject7_75_75_dark.png); */
  background-image: url(../img/cosmosbutton_opacity_0_8.png);
  /* opacity: 0.7; */
}


.topnav a:hover:nth-child(1) {
  background-image: url(../img/aarde_75_75.png);
  
}

/* .topnav a:hover:nth-child(2) {
  background-image: url(../img/aarde_75_75_groen.png);
 
} */

.topnav a:hover:nth-child(2) {
  background-image: url(../img/lichtobject_75_75_screen.png);
  /* opacity: 1.0; */
}

.topnav a:hover:nth-child(3) {
  background-image: url(../img/lichtobject2_75_75.png);
  /* opacity: 1.0; */
}
.topnav a:hover:nth-child(4) {
  background-image: url(../img/lichtobject3_75_75.png);
  /* opacity: 1.0; */
}
.topnav a:hover:nth-child(5) {
  background-image: url(../img/lichtobject5_75_75_light.png);
  /* opacity: 1.0; */
}
.topnav a:hover:nth-child(6) {
  background-image: url(../img/lichtobject7_75_75_light.png);
  opacity: 1.0;
}
.topnav a:hover:nth-child(7) {
  background-image: url(../img/cosmosbutton.png);
  opacity: 1.0;
}


.topnav a.active:nth-child(1) {
  background-image: url(../img/aarde_75_75.png);
  /* opacity: 1.0; */
  /* font-size: 25px; */
}

/* .topnav a.active:nth-child(2) {
  background-image: url(../img/aarde_75_75_groen.png);
 
} */

.topnav a.active:nth-child(2) {
  background-image: url(../img/lichtobject_75_75_screen.png);
  /* opacity: 1.0; */
  /* font-size: 25px; */
}

.topnav a.active:nth-child(3) {
  background-image: url(../img/lichtobject2_75_75.png);
  /* opacity: 1.0; */
  /* font-size: 25px; */
}
.topnav a.active:nth-child(4) {
  background-image: url(../img/lichtobject3_75_75.png);
  /* opacity: 1.0; */
  /* font-size: 25px; */
}
.topnav a.active:nth-child(5) {
  background-image: url(../img/lichtobject5_75_75_light.png);
  /* opacity: 1.0; */
  /* font-size: 25px; */
}
.topnav a.active:nth-child(6) {
  background-image: url(../img/lichtobject7_75_75_light.png);
  /* font-size: 25px; */
  opacity: 1.0;
}
.topnav a.active:nth-child(7) {
  background-image: url(../img/cosmosbutton.png);
  /* font-size: 25px; */
  opacity: 1.0;
}


/* //////////////////////////////////////////////////////////////////////////////// */
.topnav a {

  width: 75px;
  height: 75px;

  line-height: 0px;
  /* line-height: 75px; */
  text-align: center;
  
  vertical-align: top;
  /* vertical-align: middle; */
  color:rgb(208, 96, 252);
  padding: 0px 0px;
  text-decoration: none;
  border-radius: 100%;
  /* font-family: "Sono"; */
  font-family:"Recursive", monospace;
  font-weight: 400;
  
  /* word-spacing: -0.4em !important; */
  /* letter-spacing: 0.10em !important; */
  text-shadow: 1px 1px #000000;

  
  font-size:16px !important;
  word-spacing: 0.1em !important;
  letter-spacing: -0.2em !important;
object-fit: contain;
  
}

.topnav a:hover {
  background-color: rgba(247, 0, 255, 0.26);
  /* color: rgb(255, 151, 31); */
  color: rgb(31, 255, 225);

  border-radius: 100%;
  font-weight: 400;
  word-spacing: -0.4em;
  letter-spacing: 0.10em;
}

.topnav a.active {
  /* background-color: #4CAF50; */
  /* color: rgb(255, 76, 31); */

  color: rgb(31, 255, 225);

  border-radius: 100%;
  margin-top: 10px;

}


/* ////////////////////////////////////////////////////////////////////////// */
.myTopnav {
  z-index: 100;
  /* width: 700px; */
   width: 100vw; 
  height: 100px;
  background: rgba(255, 123, 0, 0);
}

#atelierview {
  z-index: -1;
  position: relative;
}

img.bg1_boompjetilt.box_boompjetilt#tiltimg_1 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

img.bg1_boompjetilt.box_boompjetilt#tiltimg_2 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

img.bg1_boompjetilt.box_boompjetilt#tiltimg_3 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

img.bg1_boompjetilt.box_boompjetilt#tiltimg_4 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

img.bg2_boompjetilt.box_boompjetilt#tiltimg_5 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

img.bg2_boompjetilt.box_boompjetilt#tiltimg_6 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

img.bg2_boompjetilt.box_boompjetilt#tiltimg_7 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

img.bg2_boompjetilt.box_boompjetilt#tiltimg_8 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

img.bg2_boompjetilt.box_boompjetilt#tiltimg_9 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

img.bg1_boompjetilt.box_boompjetilt#tiltimg_10 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

img.bg1_boompjetilt.box_boompjetilt#tiltimg_11 {
  width: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(0deg)
}

/* ----------------------- media resolutions ------------------------ */

/* #region [rgba(0,0,100,0)] */

@media screen and (max-width:799px) {

  body {overflow-x: hidden;}

  .topnav a {
    width: 58px;
    height: 58px;
    /* width: 75px;
    height: 75px; */
    line-height: 0px;
    /* color: #f2f2f2; */
    /* color: #ffceff; */
    /* border: 2px solid rgba(107, 247, 240, 0.068); */
    /* font-size: 10px; */
    font-weight: 400;
    /* font-size: 10px !important; */
    /* word-spacing: -0.4em; */
    /* letter-spacing: -0.25em; */
    background-size: 52px;
 
    background-repeat: no-repeat;
    /* background-position: cover;  */
    background-position: center;
    /* text-shadow: 1px 1px #444444; */
    -webkit-filter: drop-shadow(0px 0px 3px rgba(0, 132, 255, 0.8));
    filter: drop-shadow(0px 0px 3px rgba(0, 132, 255, 0.8));

    font-size: 90% !important;
    word-spacing: 90% !important;
    letter-spacing: 90% !important;
    /* word-spacing: 0.1em !important;
    letter-spacing: -0.3em !important; */
    object-fit: contain;/*----------------------------------------------------------------------------------------*/

    
  }

  .topnav a:hover {
    /* background-color: #ddd; */
    /* color: rgb(246, 255, 167); */
    /* background-image: url(img/aarde_75_75.png); */
    /* font-size:10px; */
    /* text-shadow: 1px 1px #444444; */
    -webkit-filter: drop-shadow(0px 0px 3px rgba(21, 255, 0, 0.8));
    filter: drop-shadow(0px 0px 3px rgba(0, 255, 0, .8));
    background-color: rgba(255, 244, 86, 0.178);
    /* border: 2px solid rgba(30, 248, 22, 0.384); */
    z-index:10000 !important;
  }

  .topnav a:active {
    /* background-color: #ddd; */
    /* color: rgb(246, 255, 167); */
    /* background-image: url(img/aarde_75_75.png); */
    /* font-size:10px; */
    /* text-shadow: 1px 1px #444444; */
    background-color: rgba(255, 244, 86, 0.178);
    -webkit-filter: drop-shadow(0px 0px 3px rgba(21, 255, 0, 0.8));
    filter: drop-shadow(0px 0px 3px rgba(0, 255, 0, 0.8));
    /* border: 2px solid rgba(30, 248, 22, 0.384); */
    z-index:10000 !important;
  }

  .myTopnav {
    /* position: relative; */
    /* top: 0px;  */
    z-index: 100;
    /* position: absolute; */
    /* width: 500px; /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
    width: 100%;
    height: 110px;
    /* top: 50%; */
    /* left: 50%; */
    /* margin-left: 10px; */
    /* background: rgba(204, 204, 204, 0.432); */
    /* display: flex; */
    /* justify-content: center; */
    /* justify-items: center; */
    /* font-size: 8px; */
    /* bottom: 100%;
    right:100%; */
  }

  .rowcontainer_boompjetilt {
    /* margin-top: 300px; */
    display: flex;
    justify-content: center;
    /* flex-direction: column */
    align-content: bottom;
    height: 100%;

  }

  img.bg1_boompjetilt.box_boompjetilt#tiltimg_1 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

  img.bg1_boompjetilt.box_boompjetilt#tiltimg_2 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

  img.bg1_boompjetilt.box_boompjetilt#tiltimg_3 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

  img.bg1_boompjetilt.box_boompjetilt#tiltimg_4 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

  img.bg2_boompjetilt.box_boompjetilt#tiltimg_5 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

  img.bg2_boompjetilt.box_boompjetilt#tiltimg_6 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

  img.bg2_boompjetilt.box_boompjetilt#tiltimg_7 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

  img.bg2_boompjetilt.box_boompjetilt#tiltimg_8 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

  img.bg2_boompjetilt.box_boompjetilt#tiltimg_9 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

  img.bg1_boompjetilt.box_boompjetilt#tiltimg_10 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

  img.bg1_boompjetilt.box_boompjetilt#tiltimg_11 {
    width: 100%;
    left: 0px;
    top: 0px;
    transform: rotate(0deg)
  }

}
/* #endregion  */



/* @media screen and (min-width:800px) and (max-width:1279px) {}

@media screen and (min-width:1280px) and (max-width:1439px) {}

@media screen and (min-width:1440px) and (max-width:1919px) {}

@media screen and (min-width:1920px) and (max-width:2559px) {}

@media screen and (min-width:2560px) {} */